@extends('admin.layouts.content')
@section('content')
{{--    <div class="layui-card">--}}


{{--        <div class="layui-form-item">--}}
{{--            <div class="layui-inline">--}}
{{--                <label class="layui-form-label">商品名称</label>--}}
{{--                <div class="layui-input-inline">--}}
{{--                    <input type="text" name="name" id="name" placeholder="请输入商品名称" autocomplete="off" class="layui-input">--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <div class="layui-inline">--}}
{{--                <button class="layui-btn layui-btn-danger layuiadmin-btn-admin" lay-submit--}}
{{--                        lay-filter="LAY-contlist-search" data-type="reload">查询--}}
{{--                </button>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}


    <table class="layui-hide" id="product_data-table" lay-filter="product_data-table"></table>

    {{--    <script type="text/html" id="data-table-bar">--}}
    {{--        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="select">选择</a>--}}
    {{--    </script>--}}

@endsection
@section('script')
    <script>
        layui.use(['table', 'jquery', 'form'], function(){



            $ = layui.jquery;
            table = layui.table;
            form = layui.form;

            //记录选中的数据:做缓存使用,作为参数传递给后台,然后生成pdf ,压缩
            var ids =new Array();
            //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
            var table_data=new Array();
            var names=new Array();
            var usernames=new Array();

            active = {
                reload: function () {
                    table.reload('data-table', {
                        id:"product_data-table",
                        page: {
                            curr: 1
                        }
                    })
                }
            };
            table.render({
                elem: '#product_data-table'
                ,url:'{{url('admin/api/user/select/apilist')}}'
                ,page: true
                ,limit: 10
                , id: 'product_data-table'
                ,cols: [[
                    {checkbox: true, width: 60, fixed: true},
                    {field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'name', title: '用户名', width: 150}
                    ,{field:'username', title: '工号', width: 150}
                    // ,{field:'product_sn', title: '商品编号', width: 200}
                    // ,{field:'product_name', title: '商品名称',width: 200 }
                    // ,{field:'price', title: '成本价',width: 200 }

                    // ,{title: '操作', toolbar: '#data-table-bar', minWidth: 80}
                ]],done: function(res, curr, count){
                    table_data=res.data;

                    //在缓存中找到id ,然后设置data表格中的选中状态
                    //循环所有数据，找出对应关系，设置checkbox选中状态
                    for(var i=0;i< res.data.length;i++){
                        for (var j = 0; j < ids.length; j++) {
                            //数据id和要勾选的id相同时checkbox选中
                            if(res.data[i].id == ids[j])
                            {
                                //这里才是真正的有效勾选
                                res.data[i]["LAY_CHECKED"]='true';
                                //找到对应数据改变勾选样式，呈现出选中效果
                                var index= res.data[i]['LAY_TABLE_INDEX'];
                                $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                            }
                        }
                    }
                    //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
                    var checkStatus = table.checkStatus('my-table');
                    if(checkStatus.isAll){
                        $(' .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                        $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                }
            });
            //复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
            table.on('checkbox(product_data-table)', function (obj) {
                if(obj.checked==true){
                    if(obj.type=='one'){
                        ids.push(obj.data.id);
                        names.push(obj.data.name);
                        usernames.push(obj.data.username);
                    }else{
                        for(var i=0;i<table_data.length;i++){
                            ids.push(table_data[i].id);
                            names.push(table_data[i].name);
                            usernames.push(table_data[i].username);

                        }
                    }
                }else{
                    if(obj.type=='one'){
                        for(var i=0;i<ids.length;i++){
                            if(ids[i]==obj.data.id){
                                ids.splice($.inArray(i,ids),1);

                                names.splice($.inArray(i,names),1);
                                usernames.splice($.inArray(i,usernames),1);
                            }
                        }
                    }else{
                        for(var i=0;i<ids.length;i++){
                            for(var j=0;j<table_data.length;j++){
                                if(ids[i]==table_data[j].id){
                                    ids.splice($.inArray(i,ids),1);
                                    names.splice($.inArray(i,names),1);
                                    usernames.splice($.inArray(i,usernames),1);
                                   // ids.remove(i);
                                }
                            }
                        }
                    }
                }
                window.parent.processs_callback(1, ids,names,usernames);
            });

            $('.layui-btn').on('click', function(){

                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

    </script>
@endsection
